import React from 'react';
import { NavLink, Outlet } from 'react-router-dom';
import RecomAttention from '../../component/RecomAttention';
import './index.less';

export default function Home() {
    return (
        <div className="home mid">
            <div className="home-sub-nav">
                <ul>
                    <li>
                        <NavLink to="attention">
                            <span>关注</span>
                        </NavLink>
                    </li>
                    <li>
                        <NavLink to="recommend">
                            <span>推荐</span>
                        </NavLink>
                    </li>
                    <li>
                        <NavLink to="hotList">
                            <span>热榜</span>
                        </NavLink>
                    </li>
                    <li>
                        <NavLink to="recent">
                            <span>最近</span>
                        </NavLink>
                    </li>
                </ul>
            </div>
            <div className="home-content">
                <div className="main-column">
                    <Outlet></Outlet>
                </div>
                <div className="more-info">
                    <RecomAttention />
                </div>
            </div>
        </div>
    );
}
